<template>

  <div :style="rootDiv">
    <img src="~assets/slider/qrcode.png" alt="" :style="divImg">
    <div :style="anchorDiv"
         @mouseenter="mouseEnter('anchorDiv')"
         @mouseleave="mouseLeave('anchorDiv')">
      <svg-icon iconClass="scan-code"
                :style="anchorSvg"
                @mouseenter="mouseEnter('anchorDiv')"
                @mouseleave="mouseLeave('anchorDiv')"/>
      <p :style="anchorP"
         @mouseenter="mouseEnter('anchorDiv')"
         @mouseleave="mouseLeave('anchorDiv')">扫码下载</p>
    </div>
    <div :style="backTopDiv"
         @click="toTop"
         @mouseenter="mouseEnter('backTopDiv')"
         @mouseleave="mouseLeave('backTopDiv')">
      <svg-icon iconClass="back-top"
                :style="backTopSvg"
                @mouseenter="mouseEnter('backTopDiv')"
                @mouseleave="mouseLeave('backTopDiv')"/>
      <p :style="backTopP"
         @mouseenter="mouseEnter('backTopDiv')"
         @mouseleave="mouseLeave('backTopDiv')">
        返回顶部
      </p>
    </div>
  </div>
</template>

<script>
export default {
  name: "Anchor",
  data() {
    return {
      pageYOffset: 0,
      currentTop: 0,
      timer: null,
      rootDiv: {
        display: '',
        position: 'fixed',
        right: '1rem',
        top: '29%',
        transition: 'display 1s'
      },
      anchorDiv: {
        background: `rgba(5, 155, 68, 1)`,
        height: '6rem',
        width: '5.9rem',
        textAlign: 'center',
        borderBottom: 'black',
        transition: 'background 400ms, fill 400ms, color 400ms'
      },
      anchorSvg: {
        position: 'relative',
        height: '3.5rem',
        width: '2.9rem',
        top: '8%',
        fill: 'white'
      },
      anchorP: {
        position: 'relative',
        color: '#fff',
        top: '8%'
      },
      backTopDiv: {
        background: `rgba(5, 155, 68, 1)`,
        height: '6rem',
        width: '5.9rem',
        textAlign: 'center',
        marginTop: '0.1rem',
        transition: 'background 400ms, fill 400ms, color 400ms'
      },
      backTopSvg: {
        position: 'relative',
        height: '3.5rem',
        width: '2.9rem',
        top: '8%',
        fill: 'white'
      },
      backTopP: {
        position: 'relative',
        color: '#fff',
        top: '8%'
      },
      divImg: {
        display: 'none',
        position: 'fixed',
        right: '7.1rem',
        top: '29%',
        height: '8rem'
      }
    }
  },
  watch: {
    pageYOffset(val) {
      console.log(val)
    }
  },
  methods: {
    handleScrollStart() {
      this.currentTop = document.documentElement.scrollTop || document.body.scrollTop;
      if (this.currentTop < 500) {
        this.rootDiv.display = 'none'
      } else {
        this.rootDiv.display = ''
      }
    },
    mouseEnter(param) {
      if (param === 'anchorDiv') {
        this.anchorDiv.background = '#fff';
        this.anchorDiv.cursor = 'pointer'
        this.anchorSvg.fill = 'rgba(133, 133, 133, 1)'
        this.anchorP.color = 'rgba(133, 133, 133, 1)'
        this.divImg.display = ''
      }
      if (param === 'backTopDiv') {
        this.backTopDiv.background = '#fff';
        this.backTopDiv.cursor = 'pointer'
        this.backTopSvg.fill = 'rgba(133, 133, 133, 1)'
        this.backTopP.color = 'rgba(133, 133, 133, 1)'
      }
    },
    mouseLeave(param) {
      if (param === 'anchorDiv') {
        this.anchorDiv.background = 'rgba(5, 155, 68, 1)'
        this.anchorSvg.fill = 'white'
        this.anchorP.color = 'white'
        this.divImg.display = 'none'
      }
      if (param === 'backTopDiv') {
        this.backTopDiv.background = 'rgba(5, 155, 68, 1)'
        this.backTopSvg.fill = 'white'
        this.backTopP.color = 'white'
      }
    },
    toTop() {
      window.scrollTo({top:0,behavior: "smooth"})
    }
  },
  mounted() {
    window.addEventListener('scroll', this.handleScrollStart, true)
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScrollStart);
  }
}
</script>

<style lang="scss" scoped>
</style>
